function showRanklist() {
  var hasRanklist = document.getElementById('SAO-ranklist');
  hpFill();
  if (hasRanklist) {
    hasRanklist.classList.add("active-SAO-ranklist");
  }
}

function hideRanklist() {
  var hasRanklist = document.getElementById('SAO-ranklist');
  if (hasRanklist && (hasRanklist.className.indexOf('active') > -1)) {
    hasRanklist.classList.remove("active-SAO-ranklist");
  }
}
function hpFill(){
  var rankItem = document.getElementById('SAO-ranklist').querySelectorAll('.HP-fill');
  for (var i=0; i < rankItem.length; i++){
    var itemWidth = Number(rankItem[i].style.width.replace("%",""));
    // console.log(itemWidth);
    if (itemWidth < 30){
      rankItem[i].querySelector('.HP-fill-in').classList.add('HP-danger');
    }
    else if ((itemWidth >= 30) && (itemWidth < 60)){
      rankItem[i].querySelector('.HP-fill-in').classList.add('HP-warning');
    }
    else{
      rankItem[i].querySelector('.HP-fill-in').classList.add('HP-health');
    }
  }
}
//监听位移动作，实现拖动效果
var dv = document.getElementById("SAO-ranklist");
var x = 0;
var y = 0;
var l = 0;
var t = 0;
var isDown = false;
dv.onmousedown = function(e) {
  x = e.clientX;
  y = e.clientY;
  l = dv.offsetLeft;
  t = dv.offsetTop;
  isDown = true;
  dv.style.cursor = "move"
};
window.onmousemove = function(e) {
  if (isDown == false) {
    return
  }
  var nx = e.clientX;
  var ny = e.clientY;
  var nl = nx - (x - l);
  var nt = ny - (y - t);
  dv.style.left = nl + "px";
  dv.style.top = nt + "px"
};
dv.onmouseup = function() {
  isDown = false;
  dv.style.cursor = "default"
};
